<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
</head>
<style>
body{
    background-color: rgb(238, 238, 238);
}

#all{
    margin: 50px 300px;
}
#all-denglu,#all-zhuce{
    position: absolute;
    box-shadow: 10px 15px 20px rgb(155, 154, 155);
    border-radius: 15px 15px 15px 15px; /*底部的背景也需要圆角，不然会显示出遮盖不到的地方*/
}
#left,#right,#left-denglu,#right-denglu{
    width:350px;
    height:450px;
    text-align: center;
    float: left;
}
#right-denglu,#right{
    background-color:rgb(93, 213, 200);
    color: #fff;
}
#left-denglu,#left{
    background-color: #fff;/*给注册登录页面加上白色*/
}
#all-zhuce{
    display: none;/* 注册页面一开始不显示 */
}
#right,#left-denglu{
    border-radius: 0 15px 15px 0;/* 右边圆角弧度 */
}
#left,#right-denglu{
    border-radius: 15px 0 0 15px;/* 左边圆角弧度 */
}
#all input{
    margin: 8px 0;
    width: 200px;
    padding: 15px;
    background-color: rgb(238, 238, 238);
    border:0px;
}
#all button{
    width: 100px;
    height: 40px;
    border-radius: 20px;
    border: 0px;
}
#right-denglu-content,#right-content{
    margin-top:150px;   /*跳转区域居中显示*/
}
a{
text-decoration:none;
}
</style>
<body>

<div id="all" class="all">
<!-- 登录页面 -->
    <div id="all-denglu">
        <div id="right-denglu">
            <div id="right-denglu-content">
                <h2>没有账号嘛？</h2>
                <h3>来加入我们的大家庭吧！</h3>
                <button id="reg"><a style="color:black" href="http://127.0.0.1:8000/index1/zhuce/">注册</a></button>
            </div>
        </div>
        <div id="left-denglu">
            <form action="" method="GET">
                <h1>登录</h1>
                <span>请输入您的信息</span>
                <br>
                    <input type="text" placeholder="手机号" name="mobile">
                    <input type="text" placeholder="密码" name="password">
                <br>
                <button>登录</button>
            </form>
        </div>
    </div>
</div>
{% if messages %}
<script>
        {% for msg in messages %}
            alert('{{ msg.message }}');
        {% endfor %}
</script>
{% endif %}
</body>
</html>